<template>
    <div class="wrap">
        <title-header>
            <div slot="left" class="title-left">
                <img src="@/assets/img/Integral-title-icon.png" alt="">
                <span>积分兑换</span>
            </div>
        </title-header>

        <ul class="imgs">
            <li v-for="item,index in tagList" :key="index">
                <img :src="item.imgUrl" :title="item.title">
                <h2 class="title">{{item.title}}</h2>
                <div class="button">{{item.buttonTxt}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
    import titleHeader from '@/components/common/title-header'
    export default {
        name: '',
        components: {
            titleHeader
        },
        props: {

        },
        data() {
            return {
                tagList:[
                    {
                        id: 0,
                        imgUrl: require('@/assets/img/integral-01.9386d4bf.png')  ,
                        title: '签到得鸡腿',
                        buttonTxt: '去签到'
                    },{
                        id: 1,
                        imgUrl:  require('@/assets/img/integral-02.150d92a1.png'),
                        title: '购课得鸡腿',
                        buttonTxt: '去购课'
                    },
                    {
                        id: 2,
                        imgUrl: require('@/assets/img/integral-03.9870f3f1.png') ,
                        title: '推荐得鸡腿',
                        buttonTxt: '去推荐'
                    },
                    {
                        id: 3,
                        imgUrl: require('@/assets/img/integral-04.afadcbdf.png'),
                        title: '做任务得鸡腿',
                        buttonTxt: '做任务'
                    },
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .wrap {

        .title-left {
            height: 40px;
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
                width: 40px;
            }

            span {
                margin-left: 10px;
                font-size: 30px;
                font-family: SourceHanSansSC;
                font-weight: bold;
                color: #242B39;
                cursor: pointer;
            }
        }

        .imgs{
            margin-bottom: 47px;
            display: flex;
            justify-content: space-between;
            li{
                position: relative;
                overflow: hidden;
                cursor: pointer;

                img{
                   width: 100%;
                   transition: all .5s ease;
                }

                .title{
                    position: absolute;
                    top: 43px;
                    left: 20px;
                    font-family: SourceHanSansSC-Bold;
                    font-size: 24px;
                    font-weight: normal;
                    font-stretch: normal;
                    color: #fff;
                }

                .button{
                    position: absolute;
                    top: 91px;
                    left: 20px;
                    width: 96px;
                    height: 27px;
                    border: 1px solid #FFFFFF;
                    line-height: 27px;
                    text-align: center;
                    font-size: 16px;
                    font-family: SourceHanSansSC;
                    font-weight: 300;
                    color: #FFFFFF;
                }

                &:hover{
                    img{
                        transform: scale(1.1);
                    }
                }
            }
        }
    }
</style>